<!--
 * @Description: .
 * @Version: 2.0
 * @Autor: zhangjx
 * @Date: 2023-05-26 14:59:23
 * @LastEditors: uphldjx 1373577124@qq.com
 * @LastEditTime: 2024-01-18 13:51:58
-->
<template>
	<BaseContainer style="--w-left-gap: 25rem">
		<template #left>
			<h3 class="label-title">
				当前数据总量: <span>{{ totalNum }}</span>
			</h3>
			<el-tabs v-model="deviceType">
				<el-tab-pane label="后台菜单" name="0"></el-tab-pane>
				<el-tab-pane label="移动端菜单" name="1"></el-tab-pane>
				<el-scrollbar max-height="75vh">
					<MenuTree ref="treeRef" :key="deviceType" :deviceType="deviceType" @node-click="handleNodeClick"></MenuTree>
				</el-scrollbar>
			</el-tabs>
		</template>
		<div class="w-100" style="margin-top:60px" v-show="Object.keys(nowMenu).length>0">
			<el-row :gutter="20">
				<el-col :span="14">
					<el-card shadow="never">
						<el-tabs tab-position="left" v-model="activeTabs">
							<template v-if="nowMenu.id && nowMenu.id != -1">
								<el-tab-pane label="菜单信息" name="detail">
									<DetailPage v-bind="detailConfig" :deviceType="deviceType" :model="nowMenu"></DetailPage>
								</el-tab-pane>
								<el-tab-pane label="菜单编辑" name="edit" v-if="all_auth['sys_menu_edit']">
									<menuForm
										v-if="activeTabs == 'edit'"
										:nowMenu="nowMenu"
										:deviceType="deviceType"
										:id="nowMenu.id"
										@refresh="handleRefresh"
									></menuForm>
								</el-tab-pane>
							</template>
							<!-- all_auth['sys_menu_add'] -->
							<el-tab-pane label="新增下级" name="next" v-if="nowMenu.type == 0 || nowMenu.id == -1">
								<MenuNextForm v-if="activeTabs == 'next'" :id="nowMenu.id" :deviceType="deviceType" @refresh="handleRefresh"></MenuNextForm>
							</el-tab-pane>
						</el-tabs>
					</el-card>
				</el-col>
				<el-col :span="10" v-show="operateBtn.length>0">
					<el-card>
						<p>当前菜单包含操作权限</p>
						<el-scrollbar max-height="75vh">
							<div class="flex flex-wrap mt10">
								<el-tag v-for="(item, index) in operateBtn" :key="index" class="mr8 mt10" effect="plain" round>
									{{ item.label }}
									{{ item.permission }}
								</el-tag>
							</div>
						</el-scrollbar>
					</el-card>
				</el-col>
			</el-row>
		</div>
	</BaseContainer>
</template>

<script setup lang="ts">
import menuForm from './menuForm/index.vue'
import MenuNextForm from './MenuNextForm/index.vue'
import MenuTree from './MenuTree/index.vue'
import DetailPage from '@/views/aplid/DetailPage/index.vue'
import { detailConfig } from './menuHooks'
import { getStore } from '@/utils/store'
import apiMod from '@/apiMod'

// 判断有没有权限
const all_auth = getStore('permissions')
const totalNum = ref(0)
const deviceType = ref('0')
const treeRef = ref(null)
const nowMenu: any = ref({})
const nodeData: any = ref({})
const operateBtn = ref([])
const activeTabs = ref('detail')

const handleNodeClick = (node, data) => {
	if (node.parentId == -1) {
		node.parentName = '根节点'
	}
	nowMenu.value = node
	nodeData.value = data
	activeTabs.value = nowMenu.value.id == -1 ? 'next' : 'detail'
	operateBtn.value = node.children.filter((item) => item.type == 1)
}

const handleRefresh = (item?: any, type?: string) => {
	activeTabs.value = 'detail'
	nextTick(() => {
		treeRef.value!.updateNodeInfo(nowMenu.value, item,type)
	})
}
onMounted(() => {
	apiMod.admin_sysMenu_count().then((res) => {
		totalNum.value = res.data
	})
})
</script>

<style scoped></style>
